<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-button
            :type="selectedUrl.length > 0 ? 'primary' : 'info'"
            :disabled="selectedUrl.length <= 0"
            @click="selectedResources"
          >
            {{ $t("button.upload_query") }}
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="fileInput.click()"
            >{{ $t("button.upload") }}
            <input type="file" ref="fileInput" @change="uploadsRequest" hidden />
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main
      class="container"
      v-infinite-scroll="queryList"
      :infinite-scroll-disabled="disabled"
      :infinite-scroll-immediate="false"
    >
      <div
        class="item"
        v-for="item in imageList"
        :key="item.url"
        @click="select(item)"
        :class="selectedUrl.includes(item.url) ? 'selected' : ''"
      >
        <el-image :src="item.url" fit="fill"> </el-image>
        <p>{{ item.name }}</p>
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup name="ImageList">
import { ref, watch, reactive, onBeforeMount } from "vue";
import { ResourceList } from "@/api/modules/common";
import { uploads } from "@/api/modules/upload";
const props = defineProps({
  type: {
    type: [Number, String]
  },
  number: {
    type: [Number, String]
  },
  categoryId: {
    type: [Number, String]
  }
});

watch(
  () => props.categoryId,
  () => {
    imageList.value = [];
    page.value = 1;
    queryList();
  }
);

const imageList = ref([]);
const disabled = ref(false);
const page = ref(1);
const queryList = () => {
  const params = {
    type: props.type,
    category_id: props.categoryId,
    page: page.value
  };

  ResourceList(params).then(response => {
    if (imageList.value.length >= response.data.total) {
      disabled.value = true;
    }

    imageList.value = imageList.value.concat(response.data.list);
    //imageList.value = [...imageList.value, response.data.list];
  });
};

const emit = defineEmits(["selected", "click"]);
const updateClickUrl = () => {
  emit("click", selectedUrl);
};

const selectedResources = () => {
  emit("selected", selectedUrl);
};

const selectedUrl = reactive([]);
const select = item => {
  const index = selectedUrl.indexOf(item.url);
  if (index > -1) {
    return;
  }

  selectedUrl.push(item.url);
  if (selectedUrl.length > props.number) {
    selectedUrl.shift();
  }

  updateClickUrl();
};

onBeforeMount(() => {
  queryList();
});

const fileInput = ref("");
const uploadsRequest = () => {
  const file = fileInput.value.files[0];
  if (!file) {
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  uploads(formData).then(response => {
    const data = response.data;
    const hasUrl = imageList.value.find(({ url }) => url === data.url);
    if (!hasUrl) {
      const items = [];
      items.push(data);
      imageList.value = items.concat(imageList.value);
    }
  });
};
</script>

<style scoped lang="scss">
@import "./ImageList.scss";
</style>
